<template>
  <el-col>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" width="700" label="文件名">
        <template slot-scope="scope">
          <span @click="playvideo(scope.row)">
            <i :class="myclass[scope.row.status]"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小"></el-table-column>
      <el-table-column prop="time" label="日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ dateChange(scope.row.time)}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              ....
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="scope.row.status!=1">
                <a :href="scope.row.uri+'?parameter=1'">下载</a>
              </el-dropdown-item>
              <el-dropdown-item>分享</el-dropdown-item>
              <el-dropdown-item>
                <span @click="deletefile(scope.row)">删除</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="refilenameclick(scope.row)">重命名</span>
              </el-dropdown-item>
              <!-- <el-dropdown-item>
                <span @click="findforld(scope.row)">文件位置</span>
              </el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="'改为「'+reform.name+'」'"
      :visible.sync="dialogVisible2"
      width="30%"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="reform">
        <el-form-item>
          <el-form-item label="文件名称">
            <el-input v-model="reform.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="txt" @click="onSubmitrename()">立即修改</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <video
        v-if="vedioplay"
        :src="vediopath"
        width="600" height="300"
        controls="controls"
      >您的浏览器不支持视频播放</video>
    </el-dialog>
  </el-col>
</template>


<script>
export default {
  data() {
    return {
      tableData: [],
      reform: {
        name: "新文件夹",
        id: {}
      },
      vediopath: "",
      vedioplay: false,
      dialogVisible2: false,
      dialogVisible: false,
      myclass: [
        "el-icon-folder",
        "el-icon-folder",
        "el-icon-picture-outline",
        "el-icon-video-play",
        "el-icon-document",
        "el-icon-headset",
        "el-icon-cloudy"
      ]
    };
  },
  methods: {
    dateChange(javaDate) {
      if (javaDate) {
        return javaDate.substr(0, 10).replace(/-/g, "/");
      } else {
        return "";
      }
    },
    deletefile(file) {
      this.$http
        .delete("/api_file/file/deletefile?id=" + file.id)
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/bypId?pId=" + this.currentPath.index
            );
            this.tableData = res;
            this.$message.success(
              "删除:" + file.name + "成功，七天内可在回收站复原"
            );
          } else {
            return this.$message.error("删除:" + file.name + res.data.message);
          }
        });
    },
    onSubmitrename() {
      this.$http
        .post(
          "/api_file/file/rename",
          this.$qs.stringify({
            id: this.reform.id,
            name: this.reform.name
          })
        )
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/getByStatus?status=3"
            );
            this.tableData = res;
            this.dialogVisible2 = false;
            this.message("重命名为「" + this.reform.name + "」成功", true);
            this.form.name = "新文件夹";
          } else {
            this.dialogVisible = false;
            this.message("重命名为「" + this.reform.name + "失败", false);
            this.form.name = "新文件夹";
          }
        });
    },
    message(message, flag) {
      if (flag) {
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },
    refilenameclick(file) {
      this.reform.name = file.name;
      this.reform.id = file.id;
      this.dialogVisible2 = true;
    },
    playvideo(file) {
      this.dialogVisible = true
      this.vediopath = file.uri;
      this.vedioplay = true;
    },
    handleClose(){
      this.vedioplay = false;
      this.dialogVisible = false;
    }
  },
  async created() {
    const { data: res } = await this.$http.get(
      "/api_file/file/getByStatus?status=3"
    );
    this.tableData = res;
  }
};
</script>

<style>
</style>